<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="main" style="position: relative;">
        <a href="javascript:;" id="download" style="position: absolute;left: 16px;top: 16px; width: 100px;height: 40px; background-color: #fff; z-index: 9999;">下载</a>
        <div id="chart" style="width: 100vw; height: 100vh;"></div>
    </div>
    <script src="./jquery.min.js"></script>
    <script src="./xt1.js"></script>
    <script src="./echarts.min.js"></script>
    <script>
        // 导出高清图片的函数
        const r = 1.5;
        function exportHighResImage() {
            // 获取图表的 base64 图片 URL
            var imgURL = myChart.getDataURL({
                // 导出的格式，可以是 'png', 'jpeg'
                type: 'png',
                // 导出图片的分辨率比例，可以是 1, 2, 3 等
                pixelRatio: r,
                // 导出的图片背景色，默认是 'white'
                backgroundColor: '#ffffff'
            });
        
            // 创建一个 Image 元素
            var img = new Image();
            img.src = imgURL;
        
            // 等待图片加载完成
            img.onload = function() {
                // 创建一个 Canvas 元素
                var canvas = document.createElement('canvas');
                canvas.width = img.width * r; // 宽度放大 3 倍
                canvas.height = img.height * r; // 高度放大 3 倍
                var ctx = canvas.getContext('2d');
        
                // 将 Image 绘制到 Canvas，使用高分辨率
                ctx.drawImage(img, 0, 0, canvas.width, canvas.height);
        
                // 获取导出的图片的 DataURL
                var highResImgDataURL = canvas.toDataURL('image/png');
        
                // 创建一个链接元素
                var link = document.createElement('a');
                link.href = highResImgDataURL;
                // 设置下载的文件名
                link.download = file + '.png';
                // 模拟链接点击进行下载
                link.click();
            };
        }
        
        var myChart = echarts.init(document.getElementById('chart'));
        myChart.setOption(option);
        $('#download').click(function() {
            exportHighResImage();
        });
    </script>
</body>
</html>